<template>
    <div class="app-container">
      <!--查询表单-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="条件查询">
          <el-input v-model="searchObj.title" placeholder="标题" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">
          查询
        </el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form>
  
      <!-- 列表 -->
        <el-table :data="list" border stripe>
        <el-table-column label="#" width="50">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="文章标题" />
        <el-table-column prop="content" label="文章内容" />
        <el-table-column prop="coverImg" label="文章图片" />
        <el-table-column prop="likes" label="点赞数" />
        <el-table-column prop="shares" label="转发数" width="100" />
        <el-table-column label="操作" align="center" width="200">
            <template>
                <el-button>删除</el-button>
                <el-button>修改</el-button>
            </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        :page-sizes="[1,2,5,10,15, 20]"
        style="padding: 30px 0; "
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
    </div>
  </template>
<script>
import $axios from 'axios'
import demoApi from '@/api/core/demo'
    export default{
        data() {
            return {
                list: null, // 数据列表
                total: 0, // 数据库中的总记录数
                page: 1, // 默认页码
                limit: 1, // 每页记录数
                searchObj: {}, // 查询条件
                num:10,
            }
        },
        created () {
            this.fetchData();
        },
        methods: {
            changePageSize(pagesize){
                this.limit = pagesize;
                this.num = 1;
                this.searchObj.title = "";
                this.fetchData();
            },
            changeCurrentPage(pages){
                this.page = pages;
                this.num = 1;
                this.searchObj.title = "";
                this.fetchData();
            },
            fetchData(){
                console.log("到了");
                console.log(this.searchObj.title);
                if(this.num == 10){
                    $axios.post(`http://localhost:8110/tbArticle/findAllIs/${this.page}/${this.limit}/${this.searchObj.title}`).then(res => {
                        console.log(res);
                        this.list = res.data.data.list
                        this.total = res.data.pageSize
                        console.log(this.page);
                        this.num = 10;
                    })
                }
                $axios.post(`http://localhost:8110/tbArticle/findAll/${this.page}/${this.limit}`).then(res => {
                    console.log(res);
                    this.list = res.data.data.list
                    this.total = res.data.pageSize
                    console.log(this.page);
                    this.num = 10;
                })
            },
            resetData (){
                this.searchObj = '';
            }
        }
    }
</script>